<template>
  <div>
    <h1>{{ count }}</h1>
    <h1>{{ title }}</h1>
    <button @click="changeCount">改变count</button>
    <button @click="changeTitle">点击改变title</button>
  </div>
</template>

<script>
import { onMounted, onUpdated, onUnmounted, ref, inject } from "vue";
export default {
  setup() {
    let title = inject("title");
    let count = ref(10);
    const changeCount = () => {
      count.value++;
    };
    const changeTitle = () => {
      title.value = "2206B";
    };
    onMounted(() => {
      console.log("onMounted");
    });
    onUpdated(() => {
      console.log("数据更新了");
    });
    onUnmounted(() => {
      console.log("组件离开");
    });
    return {
      count,
      title,
      changeCount,
      changeTitle,
    };
  },
};
</script>

<style scoped lang="scss"></style>
